<!-- 评论列表页 -->
<template>
  <div id="commentList">
    <div v-if="list.length > 0">
      <div class="comm-all" v-for="item in list" :key="item.id"  >
        <div class="comm-user flex-a-c" @click="toContentInfo(item)">
          <img :src="item.head_img_url" class="avatar" />
          <div class="user-wrap flex-a-c flex-j-sb">
            <div class="title">
              <h3>{{ item.nick_name }}</h3>
              <h4>{{ item.level_name }}</h4>
            </div>
            <div class="user-time">{{item.created_at}}</div>
          </div>
        </div>
        <div class="comment" v-if="item.content"  @click.stop="toContentInfo(item)">{{ item.content }}</div>
        <div class="comment" v-else  @click.stop="toContentInfo(item)">此用户没有填写评价</div>
        <div class="pic"  v-if="item.images && item.images.length > 0">
          <viewer :images="item.images" class="flex pic-flex">
            <img v-for="(imgItem, imgIndex) in item.images" :key="imgIndex" class="pj-img" :src="imgItem" />
          </viewer>
        </div>
        <div class="goods-rate flex-a-c" @click.stop="toContentInfo(item)">
          <div class="rate flex-a-c">
            <h4>评分：</h4>
            <van-rate v-model="item.level" readonly   :size="12" :color="'var(--themeBaseColor)' || '#E32323'"/>
          </div>
        </div>
        <div  v-if="item.append && !(item.append instanceof Array)">
          <div class="append-flex">
            <div class="comment-append" v-if="item.append && item.append.diff_date.value > 0">{{ item.append && item.append.diff_date.value }}{{ item.append && item.append.diff_date.sku }}追评:</div>
            <div class="comment-append" v-else>追评:</div>
            <div class="comment-box" >&nbsp;{{ item.append && item.append.content }}</div>
          </div>
          <div class="pic"  v-if="item.append && item.append.images && item.append.images.length > 0">
            <viewer :images="item.append && item.append.images">
              <img v-for="(reItem, reIndex) in item.append && item.append.images" :key="reIndex" class="pj-img" :src="reItem" />
            </viewer>
          </div>
        </div>
        <div class="btn-group flex">
          <div class="goods-btn evaluate"  @click="(item.reply_count > 0) ? toContentInfo(item) : ''">
            评论数:{{ item.reply_count }}
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="moreBtn" style="width: 100%; padding: 0.7rem;" v-if="noMoreComment ? false : true">
      <div @click="getMoreComment">{{ $i18n.t("加载更多") }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list", "noMoreComment"],
  data() {
    return {};
  },
  components: {},
  computed: {},
  mounted() {
    // console.log("展开评论", this.list,this.noMoreComment,this.isCup);
  },

  methods: {
    getMoreComment() {
      this.$emit("clickMore", true);
    },
    //获取评论数据
    getCommentData() {
      let that = this;
      let json = {
        goods_id: this.$route.params.id,
        page: this.commentPage,
        mid: this.fun.getKeyByMid()
      };
      // console.log(json);
      $http.get("goods.comment.get-comment", json, "获取中...").then(
        function(response) {
          // console.log(response.data);
          if (response.result === 1) {
            if (response.data.data.length < 20) {
              that.noMoreComment = true;
            }
            that.commentPage += 1;
            if (!that.contentList) {
              // console.log(!that.contentList);
              that.contentList = [];
            }
            that.contentList = [...that.contentList, ...response.data.data];
            // console.log(that.contentList);
            // that.contentList = response.data.data;
          } else {
            is_contentList = false; //复位
          }
        },
        function(response) {
          is_contentList = false; //复位
          console.log(response);
        }
      );
    },
    //跳转评论详情
    toContentInfo(data) {
      this.$router.push(
        this.fun.getUrl("CommentDetails", {
          order_id: data.order_id,
          goods_id: data.goods_id,
          order_goods_id: data.order_goods_id,
          comment_id: data.id,
          uid: data.uid
        })
      );
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#commentList {
  height: 90vh;
  overflow-y: scroll;

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #fff;
    z-index: 999;

    i {
      position: absolute;
      left: 16px;
      top: 6px;
      font-size: 24px;
    }

    p {
      line-height: 40px;
      font-size: 1rem;
      text-align: center;
      display: inline-block;
      width: 100%;
    }
  }

  .comm-all {
    background-color: #fff;
    border-radius: 0.5rem;
    padding:0.75rem;
    margin:0.5rem 0.75rem 0 0.75rem;
    .comm-user {
      .avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        margin:0 0.25rem 0 0;
      }
      .user-wrap {
        flex:1;
        .title {
          text-align: left;
          h3 {
            font-size: 0.875rem;
            font-weight: bold;
            line-height: 1.25rem;
            color: #333333;
          }
          h4 {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.0625rem;
            color: #666666;
          }
        }
        .user-time {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.0625rem;
          color: #999999;
        }
      }
    }
    .comment {
      padding:0.75rem 0 0.5rem 0;
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: #333333;
      text-align: left;
      word-break:break-all;
      word-wrap:break-word;
    }
    .append-flex {
      // display: inline-block;
      text-align: left;
      padding:0rem 0rem 0.5rem 0rem;
    }
    .comment-box {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      color: #333333;
      text-align: left;
      display: inline;
      word-break:break-all;
      word-wrap:break-word;
    }
    .comment-append {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      color: #E32323;
      text-align: left;
      display: inline;
    }
    .goods-rate {
      padding: 0  0 0.75rem 0;
      .rate {
        flex:1;
        h4 {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.0625rem;
          color: #999999;
        }
      }
      .option-right {
        flex:1;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #999999;
        .total {
          padding: 0 0 0 0.1875rem;
        }
      }
    }
    .goods-wrap {
      background-color: #F5F5F5;
      border-radius: 2px;
      .info-wrap {
        width:100%;
        box-sizing: border-box;
        padding: 0 0.75rem 0 0;
        h4 {
          width:70%;
          font-size: 0.8125rem;
          font-weight: 400;
          line-height: 1.1875rem;
          color: #666666;
          text-align: left;
        }
        h5 {
          font-size: 0.8125rem;
          font-weight: bold;
          line-height: 1.1875rem;
          color: #333333;
        }
      }
      .images {
        width: 2.1875rem;
        height: 2.1875rem;
        margin:0 0.5rem 0 0;
        border-radius: 0.125rem 0rem 0rem 0.125rem;
      }
    }
  }
  .pj-img {
    width: 4.375rem;
    height: 4.375rem;
    margin:0 0.5rem 0.5rem 0;
    border-radius: 0.25rem;
    object-fit: cover;
  }
  .pic {
    display: flex;
    .pic-flex {
      flex-wrap: wrap;
    }
  }
  .btn-group {
    justify-content: flex-end;
  }
    .goods-btn {
    min-width: 3.8125rem;
    box-sizing: border-box;
    padding:0.25rem 1.125rem;
    border: 0.0625rem solid #D6D6DC;
    border-radius: 1.125rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #AAAAB3;
    margin:0 0 0 0.75rem;
    cursor: pointer;
  }
  .evaluate {
    padding:0.25rem 0.375rem;
  }
}
</style>
